<template>
  <a-modal
    v-model:visible="bindVisible"
    :title="$t('changePassword.title')"
    :cancelText="$t('operation.cancel')"
    :okText="$t('operation.confirm')"
    @ok="confirm"
  >
    <a-form layout="vertical">
      <a-form-item :label="$t('changePassword.oldPassword')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="changeParam.oldPassword" type="password" allow-clear />
      </a-form-item>

      <a-form-item :label="$t('changePassword.newPassword')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="changeParam.newPassword" type="password" allow-clear />
      </a-form-item>

      <a-form-item :label="$t('changePassword.confirmPwd')">
        <a-input :placeholder="$t('operation.enter')" v-model:value="changeParam.confirmPwd" type="password" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>

const props = defineProps({
  visible: { type: Boolean, default: false },
})
const emit = defineEmits(['update:visible', 'ok'])
const bindVisible = ref(false)
watchEffect(() => (bindVisible.value = props.visible))
watchEffect(() => emit('update:visible', bindVisible.value))

const changeParam=reactive({
  oldPassword:'',
  newPassword:'',
  confirmPwd:''
})

const confirm = async () => {
  const res = await request.post('/api/dynamic-mock/user/changePassword', changeParam)
  bindVisible.value = false

  emit('ok')
}

</script>
